<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-06 19:38:50
-->
<template>
  <!--1. 容器 -->
  <div id="left1_container" style="height: 95%"></div>
</template>
<script>
// 2. 导入图表构造函数
import { Line } from "@antv/g2plot";
import { mapState } from "vuex";
import { get } from "../../../utils/request";
import moment from "moment";
export default {
  data() {
    return {
      monitorData: [],
      // chart: null,
    };
  },
  async mounted() {
    // 查询数据
    await this.loadMonitorData();
    // 页面渲染的时候初始化图表
    this.initChart();
  },
  methods: {
    async loadMonitorData() {
      let url = "/dashboard/pageQueryTodayData";
      let params = {
        page: 1,
        pageSize: 100,
      };
      let resp = await get(url, params);
      let data = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("hh:mm"),
          value: +item.temperature,
        };
      });
      this.monitorData = data;
    },
    // 3. 初始化图表
    initChart() {
      const data = this.monitorData;
      const line = new Line("left1_container", {
        data,
        padding: "auto",
        xField: "time",
        yField: "value",
        xAxis: {
          tickCount: 5,
          label: {
            style: {
              fill: "white",
            },
          },
        },
        yAxis: {
          tickCount: 5,
          label: {
            style: {
              fill: "white",
            },
          },

          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明
              },
            },
          },
        },
        tooltip: {
          // 列表前面标点
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "18px",
              fontFamily: "微软雅黑",
            },
          },
        },
        areaStyle: () => {
          // 面积图区域渐变设置
          return {
            fill: "l(90) 0:rgba(0, 255, 255, 1) 0.5:rgba(0, 255, 255, 0.3) 1:rgba(0,0,0,0)",
            cursor: "pointer",
          };
        },
        slider: {
          start: 0.1,
          end: 0.5,
        },
      });

      line.render();
    },
  },
};
</script>